iT邦幫忙

DAY 13
1

30 天學會 Web 前端效能優化系列 第 13

[30 天學會 Web 前端效能優化] 13. Layout

  • 分享至 

  • xImage
  •  

瀏覽器建構完 Render-tree 之後,是否便可以直接將結果 Paint 到螢幕上了呢?很明顯是不行的,我們還沒計算該擺放的位置以及其大小,這就是 Layout 這個階段瀏覽器必須完成的事。

我們以下面這份 HTML Document 為例:

  <title>Test Page for Layout</title>
  <meta name="viewport" content="width=device-width">
  <style>
  #a{
    width: 100%;
      height: 500px;
      background-color: black;
  }
  #b{
    width: 80%;
    height: 50px;
    background-color: red;
    color: white;
  }
  #c {
    width: 50%;
    height: 50px;
    background-color: blue;
    }
  </style>


  <div id="a">
    <div id="b"><p>Hello this is b</p></div>
  </div>
  <div id="c"></div>







<meta name="viewport" content="width=device-width">

這一段是用來告知瀏覽器將頁面的寬度設成裝置的寬度,如果沒有設定的話就會使用預設的 viewport ,亦即 980px。

我就不再特別畫 Render-tree 了,在公佈答案前,想先請各位思考看看,假設裝置的 width 為 400px ,這三個 div 的寬度分別為多少呢?


答案如下:

  1. body 寬度為裝置的寬度(400px)。
  2. id 為 a 的 div 設定其 width = 100% ,亦即 400px (400px * 100%),400px 繼承至 body。
  3. id 為 b 的 div 設定其 width = 80% ,因為它是 id 為 a 的 div 的 child ,其 width 為繼承而來的 400px 乘上百分之八十,亦即 320px。
  4. id 為 b 的 div 設定其 width = 50% ,亦即 body 寬度之百分之五十,也就是 200px。

最後看到的結果,會跟下面一樣:


上一篇
[30 天學會 Web 前端效能優化] 12. Render-tree
下一篇
[30 天學會 Web 前端效能優化] 14. Paint
系列文
30 天學會 Web 前端效能優化30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言